<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .box{
    background-color: red;
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
  }
</style>
<body>
  <div class="box">盒子</div>
  <input type="text" placeholder="请输入内容">
  <script>
    const input = document.querySelector('input');
    const box = document.querySelector(".box");
      box.addEventListener("mouseenter", () => {
        console.log("鼠标进入盒子 mouseenter");
      });
      box.addEventListener("mouseleave", () => {
        console.log("鼠标离开盒子 mouseleave");
      });

    input.addEventListener('focus',()=>{
      console.log('获得焦点');
    });
    input.addEventListener('blur',()=>{
      console.log('失去焦点');
    });
    input.addEventListener('keydown',()=>{
      console.log('按下');
    });
    input.addEventListener('keyup',(e)=>{
      console.log('抬起',e.key);
      if (e.key == "Enter") {
          console.log("按下了回车键，可以提交表单");
        }
    });
    input.addEventListener("input", (e) => {
        console.log("输入框 input 输入内容", e.currentTarget.value);
      });
  </script>
</body>
</html>